<template>
    <!-- 搜索页 -->
    <div id="in">
        <div class="body">
            <!-- <el-table :data="songData" stripe style="width: 100%">
                <el-table-column prop="songName" label="歌曲" width="600">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="400">
                </el-table-column>
                <el-table-column prop="address" label="时长" width="">
                </el-table-column>
            </el-table> -->
            <el-table :data="songData" stripe highlight-current-row class="table">
                <el-table-column type="index" :index="indexMethod" width="80">
                </el-table-column>
                <el-table-column prop="songName" label="歌曲" width="320">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="300">
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="favorites(scope.$index, scope.row)">
                            收藏
                        </el-button>
                        <el-button size="mini" @click="play(scope.$index, scope.row)">
                            播放
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="时长">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
import { mapState, mapMutations } from "vuex";
export default {
    props:['c'],
    data() {
        return {
            classify: this.$route.query.classify?this.$route.query.classify:this.c,
            songData: null,
        }
    },
    components: {
        Nav,
        Footer
    },
    computed: {
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapMutations("user", ["userDel"]),
        indexMethod(index) {
            return index + 1;
        },
        favorites: function (index, row) {
            this.axios({
                url: "/api/users/songLike",
                params: {
                    songID: row.songsID,
                    userID: this.user.userID
                }
            }).then(res => {
                if (res.data.code == 401) {
                    this.userDel()
                    this.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    this.$message({
                        message: '收藏成功',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log("歌曲收藏错误", err);
            })
        },
        play(index, row) {
            let song = {
                name: row.songName,
                artist: row.singerName,
                url: '/api/' + row.url,
                cover: '/api/' + row.imgUrl,
                lrc: row.songWord,
                songsId: row.songsID,
                time: row.time
            };
            for (const i in this.$audio) {
                if (this.$audio[i].songsId == row.songsID) {
                    this.$audio.splice(i, 1);
                    break;
                }
            }
            // console.log(song);
            // this.$router.push('/music')
            this.$audio.unshift(song)
            this.$router.push("/music")
        },
    },
    watch: {
        $route() {
            this.$router.go()
        }
    },
    created: function () {
        this.axios({
            url:"/api/listens/calssifys",
            params:{
                calssifyID:this.classify
            }
        }).then(res=>{
            console.log(res.data.data.data);
            this.songData = res.data.data.data
        }).catch(err=>{
            console.log("分类失败");
        })
    }
};
</script>

<style>
#in {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#in .body {
    width: 80%;
    margin: 0px auto;
}
</style>